<%--
  Created by IntelliJ IDEA.
  User: 30822
  Date: 2023/6/1
  Time: 8:33
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
    <script src="${pageContext.request.contextPath}/js/jquery.js"></script>
    <script src="${pageContext.request.contextPath}/layui-v2.8.4/layui/layui.js"></script>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="${pageContext.request.contextPath}/layui-v2.8.4/layui/css/layui.css" rel="stylesheet">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.3/dist/umd/popper.min.js"></script>
    <script src="${pageContext.request.contextPath}/bootstrap-5.3.0-alpha1-dist/js/bootstrap.min.js"></script>
    <%--    超链接事件，点击通过controller访问add页面--%>
    <script>

        //行参数直接写，不用写类型
        <%--const myLink = document.getElementById('my-link');--%>
        <%--myLink.addEventListener('click', function() {--%>
        <%--    var url='${pageContext.request.contextPath}/user/ToUserInfo';--%>
        <%--    toUpdate(url);--%>
        <%--});--%>
        function Out(){
            window.location.href="${pageContext.request.contextPath}/user/logout";
        }
        function toUserInfo(url){

            $("#main").load(url);
        }
        function toUserClass(url){

            $("#main").load(url);
        }
        function toEdit(id){
            //
            const url = "${pageContext.request.contextPath}/user/toEdit?id=" + id;
            $("#main").load(url);
        }
        function toMyClass(url){

            $("#main").load(url);
        }
    </script>
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo layui-hide-xs layui-bg-black">健身房管理系统</div>
        <!-- 头部区域（可配合layui 已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <!-- 移动端显示 -->
            <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
                <i class="layui-icon layui-icon-spread-left"></i>
            </li>

        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item layui-hide layui-show-sm-inline-block">
                <a href="javascript:;">
                    <img src="https://unpkg.com/outeres@0.0.10/img/layui/icon-v2.png" class="layui-nav-img">
                    ${sessionScope.userInfo.userName}
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:Out();">Sign out</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
                <a href="javascript:;">
                    <i class="layui-icon layui-icon-more-vertical"></i>
                </a>
            </li>
        </ul>
    </div>
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;" > 个人信息</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:toUserInfo('${pageContext.request.contextPath}/user/ToUserInfo');">个人信息</a></dd>

                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">课程管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:toUserClass('${pageContext.request.contextPath}/class/ToUserClass');" id="cclass">报名选课</a></dd>
                        <dd><a href="javascript:toMyClass('${pageContext.request.contextPath}/class/ToMyClass');">我的课程</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">会员信息</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">会员信息</a></dd>
                    </dl>
                </li>

            </ul>
        </div>
    </div>
    <div class="layui-body" id="main">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">
            <blockquote class="layui-elem-quote layui-text" style="font-size: 45px">
                ${sessionScope.userInfo.userName}的主页
            </blockquote>
            <div class="container-fluid px-4">
                <h1 class="mt-4">个人信息</h1>

                <ol class="breadcrumb mb-4">
                    <li class="breadcrumb-item"><a th:href="@{/toUserMain}">主页</a></li>
                    <li class="breadcrumb-item active">个人信息</li>
                </ol>

                <div class="card mb-4">

                    <table class="table table-hover">
                        <tr>

                            <td text-align="center">会员账号/卡号：</td>

<%--                                            <td text-align="center">--%>
                            <c:choose>
                                <c:when test="${user.userCard==null}">
                                    <td text-align="center">您暂且不是会员 </td>
                                </c:when>

                                <c:when test="${user.userCard!=null}">
                                    <td text-align="center">${user.userCard} </td>
                                </c:when>
                            </c:choose>
<%--                                            </td>--%>

                        </tr>
                        <tr>
                            <td text-align="center">姓名：</td>
                            <td >${user.userName}</td>
                        </tr>
                        <tr>
                            <td text-align="center">性别：</td>
                            <td >${user.gender}</td>
                        </tr>
                        <tr>
                            <td text-align="center">年龄：</td>
                            <td >${user.userAge}</td>
                        </tr>
                        <tr>
                            <td text-align="center">联系方式：</td>
                            <td >${user.userPhone}</td>
                        </tr>
                        <tr>
                            <td text-align="center">身高：</td>
                            <td >${user.userHeight}</td>
                        </tr>
                        <tr>
                            <td text-align="center">体重：</td>
                            <td >${user.userWeight}</td>
                        </tr>
                        <tr>
                            <td text-align="center">办卡时间：</td>
                            <c:choose>
                                <c:when test="${user.userCard==null}">
                                    <td text-align="center">您暂且不是会员 </td>
                                </c:when>

                                <c:when test="${user.userCard!=null}">
                                    <td text-align="center">${user.userCard} </td>
                                </c:when>
                            </c:choose>
                        </tr>
                        <tr>

                            <td text-align="center">剩余课时：</td>
                            <c:choose>
                                <c:when test="${user.userCard==null}">
                                    <td text-align="center">0</td>
                                </c:when>

                                <c:when test="${user.userCard!=null}">
                                    <td text-align="center">${user.cardHour} </td>
                                </c:when>
                            </c:choose>
                        </tr>

                    </table>
                    <div style="text-align:center;margin-bottom:15px">
                        <a href="javascript:toEdit(${user.id});" id="myLink">
                            <input type="button" class="btn btn-outline-primary" value="编辑个人信息">
                        </a>
                    </div>
                </div>
            <br><br>
        </div>
    </div>
    <%--    <div class="layui-footer">--%>
    <%--        <!-- 底部固定区域 -->--%>
    <%--        底部固定区域--%>
    <%--    </div>--%>
</div>

<%--</div>--%>
<span style="color: red;margin-left: 99px; text-align: center" >${requestScope.msg}</span>
<script>
    <%--    jquery获取dom,类是。id是#，元素就是标签名input--%>
    <%--点击事件--%>
    <%--prop为属性--%>
    $("#allBtn").click(function (){
        // 将这个bool赋值给一个变量
        var isChecked= $("#allBtn").prop("checked");
        //isChecked为全选的值，根据全选的值控制每一行的复选框
        if(isChecked){
            //    全选
            $(".itemBox").prop("checked",true);
        }
        else{
            $(".itemBox").prop("checked",false);
            //    取消
        }
    })
    //选中下面两行，全选也选中
    $(".itemBox").click(function (){
        //  获取所有input的个数
        var all= $(".itemBox").length;
        //获取选中的input的个数
        var ck= $(".itemBox :checked").length;

        if(ck==all){
            $("#allBtn").prop("checked",true);
        }else{
            $("#allBtn").prop("checked",false);

        }
    })
</script>
</body>
</html>
